<template>
  <div class="searchHistory">
    <!-- 搜索栏 start -->
    <van-sticky>
      <van-search v-model="kw" show-action shape="round" placeholder="请输入搜索关键词" @search="onSearch" @cancel="onBack" style="padding: 10px 12px 10px 20px" />
    </van-sticky>
    <!-- 搜索栏 end -->

    <!-- 历史搜索 -->
    <div class="box" v-if="search_his.length > 0">
      <div class="title">
        <b>历史搜索</b>
        <a @click="onClearHis">
          <van-icon name="delete-o" size="14" />清空历史记录
        </a>
      </div>
      <div class="list" v-if="isLogin">
        <span v-for="(item, index) in search_his" :key="index" @click="toSearch(item.searchText)">{{ item.searchText }}</span>
      </div>
			<div class="list" v-else>
        <span v-for="(item, index) in search_his" :key="index" @click="toSearch(item)">{{ item }}</span>
      </div>
    </div>

    <!-- 热门搜索 -->
    <div class="box">
      <div class="title">
        <b>热门搜索</b>
      </div>
      <div class="list">
        <span @click="toSearch('会计')">会计</span>
        <span @click="toSearch('销售')">销售</span>
        <span @click="toSearch('文员')">文员</span>
        <span @click="toSearch('人事')">人事</span>
        <span @click="toSearch('行政')">行政</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getPersonSearchHistory, addPersonSearchHistory, clearPersonSearchHistory, checkPersonLogin } from "@/util/session";
import { Sticky, Icon, Search, Button, Dialog } from "vant";
export default {
  name: "SearchIndex",
  components: {
    [Sticky.name]: Sticky,
    [Search.name]: Search,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component,
  },
  props: ["title"],
  // 定义属性
  data() {
    return {
			isLogin:checkPersonLogin(),
      kw: "",
      search_his: []
    };
  },
  activated: function () {
    if (checkPersonLogin()) {
      this.$api.get('/PersonStation/GetHisSearchKeywords').then((res) => {
        this.search_his = res.response;
      });
    }
    else {
      this.search_his = getPersonSearchHistory();
    }

  },
  // 方法集合
  methods: {
    onSearch() {
      //加入个人搜索职位历史记录
      if (this.kw.trim() != "") {
        if (this.isLogin) {
          this.$api.post("/PersonStation/AddHisSearchKeywords?keywords=" + this.kw);
        } else {
          addPersonSearchHistory(this.kw);
        }
      }
      this.toSearch(this.kw);
    },
    toSearch(kw) {
      this.$router.push({ name: "person-search-result", params: { kw: kw } });
    },
    //清空历史记录
    onClearHis() {
      Dialog.confirm({
        message: "确认清空历史记录",
        confirmButtonColor: "#f70",
      }).then(() => {
        let person = localStorage.getItem("person_user");
        if (person) {
          this.$api.post("/PersonStation/DeleteHisSearchKeywords").then((res) => {
            this.search_his = [];
          });
        } else {
          clearPersonSearchHistory();
          this.search_his = [];
        }
      });
    },
  },
};
</script>

<style>
/* 通用 */
.searchHistory .box {
  display: flex;
  flex-direction: column;
  padding: 0 20px 20px;
  background-color: #fff;
}

.searchHistory .box .title {
  display: flex;
  justify-content: space-between;
  line-height: 55px;
}

.searchHistory .box .title b {
  font-size: 17px;
  color: #000;
}

.searchHistory .box .title a {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #888;
}

.searchHistory .box .title a i {
  margin-right: 2px;
}

.searchHistory .box .list {
  display: flex;
  flex-wrap: wrap;
}

.searchHistory .box .list span {
  display: flex;
  padding: 5px 11px;
  border-radius: 3px;
  margin-right: 9px;
  margin-bottom: 12px;
  background-color: #f9f9f9;
  font-size: 13px;
  color: #666;
}
</style>
